@include('Admin.public.head')
<body>
    <style type="text/css">
 
.you input{
    outline: none;
    width: 65px;
    border: none;
    float: left;
    margin-right: 3%;
    text-align: center;
    color: #fff;
    background: #35404d;
    height: 43px;
    font-size: 16px;
    /*position: relative;*/
}
.you button{
    outline: none;
    width: 70px;
    border: none;
    float: left;
    margin-right: 3%;
    text-align: center;
    height: 43px;
    font-size: 16px;
    border-radius: 5px;
    color: #fff;
    background: #cec9c9;
}
.you.specs{
    display: flex;
}
.you.specs>div{
    margin-right: 20px;
    display: inline-block;
    position: relative;
}

.you.val{
    display: flex;
    flex-direction: column;
}
.you span{
    float: left;
    margin-right: 3%;
    font-size: 20px;
}
.specs_div{
    margin-top: 3%;
    display:flex;
}

#my-popups 
{
    width: 300px;
    height: 300px;
}

#my-popup 
{
    width: 300px;
    height: 300px;
}

#inventory_set
{
    margin-bottom: 3%;
    width: 93px;
    text-align: center;
    margin-top: 25%;
    margin-left: 30%;
}

#inventory_sets
{
    margin-bottom: 3%;
    width: 93px;
    text-align: center;
    margin-top: 25%;
    margin-left: 30%;
}

#specs_inpt_val
{
    width: 115px;
    height: 46px;
    margin-left: 28%;
    outline: none;
    border: none;
    border-radius: 5px;
    margin-top: 10%;
}

#specs_inpt_vals
{
    width: 115px;
    height: 46px;
    margin-left: 28%;
    outline: none;
    border: none;
    border-radius: 5px;
    margin-top: 10%;
}
.am-close.del
{
    color: #08bde8;
    position: absolute;
    left: 70%;
    top: -20%;
    display:none;

}
.you.specs>div:hover .am-close.del
{
    display:block;

}



</style>
@include('Admin.public.menu')
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<div class=" admin-content" id="app" >

     <!--添加模态框1-->
    <div class="am-popup am-popup-inner" id="my-popups">
        <div class="am-popup-hd">
            <h4 class="am-popup-title">添加规格名</h4>
            <span data-am-modal-close class="am-close">&times;</span>
        </div>
        <div class="am-popup-bd">
            <input type="text" placeholder="请输入规格名" id="specs_inpt_val">
            <div class="am-form-group am-cf">
                    <div class="you">
                        <p id="opend-p">
                            <button type="button" class="am-btn am-btn-success am-radius" v-on:click="saveSpecsName()" id="inventory_set">确认提交</button>
                        </p>
                    </div>
            </div>

        </div>
    </div>

     <!--添加模态框2-->
    <div class="am-popup am-popup-inner" id="my-popup">
        <div class="am-popup-hd">
            <h4 class="am-popup-title">添加规格值</h4>
            <span data-am-modal-close class="am-close">&times;</span>
        </div>
        <div class="am-popup-bd">
            <input type="text" placeholder="请输入规格值" id="specs_inpt_vals">
            <input type="hidden" id="checkSpecsId" value="" >
            <div class="am-form-group am-cf">
                    <div class="you">
                        <p id="opend-p">
                            <button type="button" class="am-btn am-btn-success am-radius" v-on:click="saveSpecsVal()" id="inventory_sets">确认提交</button>
                        </p>
                    </div>
            </div>

        </div>
    </div>

    <div class="daohang">
    </div>
    <div class="admin-biaogelist" id="app">
        <div class="listbiaoti am-cf">
            <ul class="am-icon-flag on"> 商品规格设置 </ul>
            <dl class="am-icon-home" style="float: right;"> 当前位置： 首页 > <a href="/admin/classify/shop">商品列表</a> > 商品规格设置 </dl>
        </div>
        <div class="fbneirong">
                <div class="am-form-group am-cf">
                    <div class="zuo">规格名列表：</div>
                    <div class="you specs" >
                        <div v-for="val,index in specsList" >
                            <input type="button" v-model="val.name" >
                            <span class="am-close del" v-on:click="delSpecsName( val.id )" >&times;</span>
                        </div>

                        <button data-am-modal="{target: '#my-popups', closeViaDimmer: 1, width: 400, height: 800}" >添加</button>
                    </div>
                </div>
                 <div class="am-form-group am-cf">
                    <div class="zuo">规格值列表：</div>
                    <div class="you val" >
                       <div class="specs_div" v-for="v,i in specsList">
                            <span>@{{ v.name }}:</span>
                            <div v-for="val,index in specsLists" >
                                <div v-if = "val.specs_id == v.id"  class="you specs" >
                                    <div v-for="j,m in val.vals" >
                                        <input type="button"  v-model="j.val">
                                        <span class="am-close del" v-on:click="delSpecsVal( j.id )" >&times;</span>
                                    </div>
                                </div>
                            </div>
                            <button data-am-modal="{target: '#my-popup', closeViaDimmer: 1, width: 400, height: 800}" v-on:click="specsIdCopy(v.id)">添加</button>
                       </div>
                    </div>
                </div>       
        </div>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script type="text/javascript">

      
        </script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    goods_id:'',
                    //商品规格名
                    specsList :{},
                    //商品规格名--值
                    specsLists:{}
                },
                methods: {
                    obtain:function (val) {
                        var query = window.location.search.substring(1);
                        var vars = query.split("&");
                        for (var i=0;i<vars.length;i++) {
                            var pair = vars[i].split("=");
                            if(pair[0] == val){
                                return pair[1];
                            }
                        }
                    },
                    initialize:function () {
                        var id = this.obtain('id');
                        if(id>0){
                           $.post("/admin/classify/goods",{'_token':'{{csrf_token()}}',class:'specs',id:id},function (res) {
                                if(res.code){
                                    app.specsList = res.GoodsSpecsName;
                                    app.specsLists = res.GoodsSpecsVal;
                                    app.goods_id = id;
                                } else {
                                    layer.msg(res.data);
                                }
                            });
                        }
                    },
                    //删除规格名
                    delSpecsName:function ( index ) {
                        if ( index ) {
                              layer.confirm('您确定要删除该规格名吗,该操作将会删除该规格名下的所有规格值,请谨慎操作!', {
                                btn: ['确定','取消'] //按钮
                                }, function(){
                                    //确认
                                    $.post("/admin/classify/goods", {
                                        '_token': '{{csrf_token()}}',
                                        class:'delSpecsName',
                                        id: index
                                    }, function (res) {
                                        if (res.code) {
                                            layer.msg(res.data, {time: 500}, function () {
                                                location.reload();
                                            });
                                        } else {
                                            layer.msg(res.data);
                                        }
                                    });
                                 
                                }, function(){
                                    //取消
                                });
                        }     
                    },
                    //删除对应规格名下的规格值
                    delSpecsVal:function (index) {
                        if ( index ) {
                            layer.confirm('您确定要删除该规格值吗,该操作不可回退,请谨慎操作!', {
                                btn: ['确定','取消'] //按钮
                                }, function(){
                                    //确认
                                    $.post("/admin/classify/goods", {
                                        '_token': '{{csrf_token()}}',
                                        class:'delSpecsVal',
                                        id: index
                                    }, function (res) {
                                        if (res.code) {
                                            layer.msg(res.data, {time: 400}, function () {
                                                location.reload();
                                            });
                                        } else {
                                            layer.msg(res.data);
                                        }
                                    });
                                 
                                }, function(){
                                    //取消
                            });
                        }
                    },

                    //添加规格值时对应的规格名id的赋值
                    specsIdCopy:function( specs_id ){
                        $("#checkSpecsId").val( specs_id );
                    },
                    //添加规格名
                    saveSpecsName:function () {
                        if ( app.goods_id == '' ) {
                            layer.msg('商品id不能为空!');
                            return false;
                        }
                        $.post("/admin/classify/goods", {
                            '_token': '{{csrf_token()}}',
                            class: 'saveSpecsName',
                            goods_id:app.goods_id,
                            name:$("#specs_inpt_val").val()
                        }, function (res) {
                            if (res.code) {
                                layer.msg(res.data,{icon: 6},function () {
                                    $("#my-popups").modal("close");
                                    location.reload();
                                },200);
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },
                    //添加规格名下的规格值
                    saveSpecsVal:function () {
                        var checkSpecsId = $("#checkSpecsId").val();
                        var specsVal = $("#specs_inpt_vals").val();
                        if ( checkSpecsId == '' ) {
                            layer.msg('添加的商品规格名id不能为空!');
                            return false;
                        }
                        $.post("/admin/classify/goods", {
                            '_token': '{{csrf_token()}}',
                            class: 'saveSpecsVal',
                            specs_id:checkSpecsId,
                            val:specsVal
                        }, function (res) {
                            if (res.code) {
                                layer.msg(res.data,{icon: 6},function () {
                                    $("#my-popup").modal("close");
                                    location.reload();
                                },200);
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    }
                },
                //自动执行
                mounted: function () {
                    this.initialize();
                },
            })

        </script>
@include('Admin.public.foot')